<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="account-num">
                {{ $t('basics.huishouAcc') }}：<span>{{ pageList.total }}</span>
            </div>
            <div class="container-head mt10 mb10">
                <div style="display: flex">
                    <div>
                        <span class="mr10">{{
                            t('basics.shanchushijian')
                        }}</span>
                        <a-range-picker
                            style="width: 280px"
                            v-model="form.deleted_at"
                        />
                    </div>
                    <a-button
                        class="ml20 mr20"
                        type="primary"
                        @click="searchButton"
                    >
                        <icon-search class="mr6" />
                        {{ $t('basics.search') }}
                    </a-button>
                    <a-button type="secondary" @click="resetButton">
                        <icon-refresh class="mr6" />
                        {{ $t('basics.reset') }}
                    </a-button>
                </div>
            </div>
            <div class="container-content">
                <div class="container-content-button mb10">
                    <a-button type="primary" status="danger" @click="deleteAcc">
                        <template #icon><icon-delete /></template>
                        {{ $t('basics.delete') }}
                    </a-button>
                    <a-button
                        class="ml20"
                        style="background: #f53f3f; width: auto"
                        type="primary"
                        status="danger"
                        @click="clearData"
                    >
                        清空回收站
                    </a-button>
                </div>
                <div class="container-content-table">
                    <a-table
                        :columns="columns"
                        :data="tableList"
                        :loading="loading"
                        :row-selection="rowSelection"
                        v-model:selectedKeys="selectedKeys"
                        row-key="id"
                        :pagination="false"
                    >
                        <template #cookie="{ record }">
                            <a-tooltip
                                :content="$t('basics.copy')"
                                position="bottom"
                            >
                                <i
                                    class="copy-icon"
                                    @click="copyToClipboard(record.cookie)"
                                    ><icon-copy
                                /></i>
                            </a-tooltip>
                            <span>{{ record.cookie }}</span>
                        </template>
                    </a-table>
                    <div
                        class="_crud-footer mt-3 text-right"
                        ref="crudFooterRef"
                    >
                        <a-pagination
                            :total="pageList.total"
                            show-total
                            show-jumper
                            show-page-size
                            @page-size-change="getList"
                            @change="getList"
                            v-model:current="form.page"
                            v-model:page-size="form.pageSize"
                            style="display: inline-flex"
                            :page-size-options="[10, 20, 50, 100]"
                            :default-page-size="100"
                        />
                    </div>
                </div>
            </div>
            <a-modal
                v-model:visible="visible"
                :render-to-body="false"
                :footer="false"
            >
                <template #title>
                    {{ $t('basics.daochu') }}
                </template>
                <a-form :model="bandForm" ref="bandFormRef">
                    <a-form-item
                        field="num_of_message_available"
                        :label="$t('basics.status')"
                        label-col-flex="80px"
                        validate-trigger="blur"
                    >
                        <a-select
                            v-model="bandForm.status"
                            :style="{ width: '320px' }"
                            :placeholder="$t('basics.textStatus')"
                            allow-clear
                        >
                            <a-option
                                :label="$t('basics.weifasong')"
                                :value="1"
                            ></a-option>
                            <a-option
                                :label="$t('basics.fasongzhong')"
                                :value="2"
                            ></a-option>
                            <a-option
                                :label="$t('basics.yifasong')"
                                :value="3"
                            ></a-option>
                        </a-select>
                    </a-form-item>
                </a-form>
                <div class="dialog-foot">
                    <a-button @click="visible = false">{{
                        $t('basics.concel')
                    }}</a-button>
                    <a-button type="primary" style="margin-right: 20px"
                        ><a-link :hoverable="false">{{
                            $t('basics.sure')
                        }}</a-link></a-button
                    >
                </div>
            </a-modal>
        </div>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue';
import {
    getRecycleList,
    recoveryAcc,
    realDelete
} from '@/api/cloud/userTaskDetail.js';
import { useI18n } from 'vue-i18n';
import { $request } from '@/utils/request';

const { t } = useI18n();
const { proxy } = getCurrentInstance();
const bandForm = ref({
    status: 1
});
const selectedKeys = ref([]);
const rowSelection = ref({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
});
const visible = ref(false);
const loading = ref(true);
const columns = [
    {
        title: t('basics.xuhao'),
        dataIndex: 'id',
        width: 100,
        slotName: 'id'
    },
    {
        title: t('basics.zhanghao'),
        dataIndex: 'myphonenumber',
        width: 120,
        slotName: 'myphonenumber',
        ellipsis: true,
        tooltip: true
    },
    {
        title: 'cookie',
        dataIndex: 'cookie',
        ellipsis: true,
        tooltip: true,
        width: 200,
        slotName: 'cookie'
    },
    {
        title: 'device_info',
        dataIndex: 'device_info',
        ellipsis: true,
        tooltip: true,
        minWidth: 200,
        slotName: 'device_info'
    },
    {
        title: t('basics.chuangjianshijian'),
        dataIndex: 'created_at',
        width: 220,
        ellipsis: true,
        tooltip: true,
        slotName: 'created_at'
    }
];

const form = ref({
    deleted_at: [],
    page: 1,
    pageSize: 100
});
const tableList = ref([]);
const pageList = ref({
    total: 0
});

const clearData = () => {
    console.log(123);
    $request.post('/cloud/phoneinfo/forceDelete').then((res) => {
        console.log('清除成功');
        proxy.$message.success('清除成功');
        getList();
    });
};

// 获取列表数据
const getList = () => {
    getRecycleList(form.value).then((res) => {
        tableList.value = res.data.items;
        pageList.value = res.data.pageInfo;
        loading.value = false;
    });
};

const reset = () => {
    form.value.deleted_at = [];
    form.value.page = 1;
    form.value.pageSize = 100;
};
const resetButton = () => {
    reset();
    getList();
};
// 搜索
const searchButton = () => {
    getList();
};
// 删除
const deleteAcc = () => {
    if (!selectedKeys.value.length) {
        proxy.$message.error(t('basics.deleteAccountTxt'));
        return;
    }
    proxy.$modal.warning({
        title: t('basics.xitongtishi'),
        content: t('basics.deleteContent'),
        hideCancel: false,
        cancelText: t('basics.concel'),
        okText: t('basics.sure'),
        simple: false,
        onOk: () => {
            realDelete({ ids: selectedKeys.value }).then((res) => {
                if (res.code == 200) {
                    proxy.$message.success(t('basics.controlsSecc'));
                    getList();
                }
            });
        }
    });
};

getList();
</script>
<script>
export default { name: 'cloud:userTaskDetail' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
.account-num {
    font-size: 16px;
    display: flex;
    align-items: center;
    span {
        margin-right: 30px;
        color: red;
    }
}
</style>
